<template>
    <div class="seller-center-container">
        <h2>卖家中心</h2>

        <div class="stats-cards">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-value">{{ sellerStats.totalAuctions || 0 }}</div>
                        <div class="stat-label">总拍卖数</div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-value">{{ sellerStats.activeAuctions || 0 }}</div>
                        <div class="stat-label">正在进行</div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-value">{{ sellerStats.totalSales || 0 }}</div>
                        <div class="stat-label">成交数</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div class="action-cards">
            <h3>快捷操作</h3>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card shadow="hover" class="action-card">
                        <template #header>
                            <div class="card-header">
                                <span>发布拍卖品</span>
                            </div>
                        </template>
                        <div class="card-content">
                            <div class="card-icon">
                                <el-icon :size="40">
                                    <Plus />
                                </el-icon>
                            </div>
                            <p>创建新的拍卖品，设置起拍价、拍卖时间等</p>
                            <router-link to="/user/seller/auction/publish">
                                <el-button type="primary">发布拍卖品</el-button>
                            </router-link>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="action-card">
                        <template #header>
                            <div class="card-header">
                                <span>管理拍卖品</span>
                            </div>
                        </template>
                        <div class="card-content">
                            <div class="card-icon">
                                <el-icon :size="40">
                                    <Goods />
                                </el-icon>
                            </div>
                            <p>查看和管理您发布的所有拍卖品</p>
                            <router-link to="/user/seller/auctions">
                                <el-button type="primary">管理拍卖品</el-button>
                            </router-link>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="action-card">
                        <template #header>
                            <div class="card-header">
                                <span>浏览市场</span>
                            </div>
                        </template>
                        <div class="card-content">
                            <div class="card-icon">
                                <el-icon :size="40">
                                    <Shop />
                                </el-icon>
                            </div>
                            <p>查看市场上其他卖家的拍卖品</p>
                            <router-link to="/market">
                                <el-button type="primary">前往市场</el-button>
                            </router-link>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div class="recent-auctions" v-if="recentAuctions.length > 0">
            <h3>最近发布的拍卖品</h3>
            <el-table :data="recentAuctions" style="width: 100%" v-loading="loading">
                <el-table-column prop="title" label="商品名称" min-width="200">
                    <template #default="scope">
                        <div class="auction-title-cell">
                            <div class="auction-image">
                                <img :src="scope.row.image || 'https://via.placeholder.com/50'" alt="拍卖品图片" />
                            </div>
                            <span>{{ scope.row.title }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="startPrice" label="起拍价" width="120">
                    <template #default="scope">
                        <span>￥{{ scope.row.startPrice }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="180">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.startTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="180">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.endTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link @click="viewAuctionDetail(scope.row.id)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus, Goods, Shop } from '@element-plus/icons-vue'
import { getSellerInfo, getSellerAuctions } from '@/api/seller'

const router = useRouter()
const loading = ref(false)

// 卖家统计数据
const sellerStats = ref({
    totalAuctions: 0,
    activeAuctions: 0,
    totalSales: 0
})

// 最近发布的拍卖品
const recentAuctions = ref([])

// 获取卖家信息和统计数据
const fetchSellerInfo = async () => {
    loading.value = true
    try {
        const res = await getSellerInfo()
        if (res.data && res.data.code === 1 && res.data.data) {
            const sellerInfo = res.data.data
            sellerStats.value.totalSales = sellerInfo.totalSales || 0
        }
    } catch (error) {
        console.error('获取卖家信息失败:', error)
    } finally {
        loading.value = false
    }
}

// 获取卖家的拍卖品
const fetchSellerAuctions = async () => {
    loading.value = true
    try {
        const params = {
            page: 1,
            pageSize: 5,
            sortField: 'createTime',
            sortOrder: 'desc'
        }

        console.log('请求卖家中心拍卖品列表参数:', params)
        const res = await getSellerAuctions(params)
        console.log('获取卖家中心拍卖品列表响应:', res)

        if (res && res.code === 1 && res.data) {
            const pageResult = res.data
            recentAuctions.value = pageResult.records || []

            // 统计数据
            sellerStats.value.totalAuctions = pageResult.total || 0
            sellerStats.value.activeAuctions = recentAuctions.value.filter(item =>
                item.status === 'ACTIVE'
            ).length
        } else {
            recentAuctions.value = []
            ElMessage.warning('获取拍卖品列表失败')
        }
    } catch (error) {
        console.error('获取拍卖品列表失败:', error)
        ElMessage.error('获取拍卖品列表失败，请稍后再试')
    } finally {
        loading.value = false
    }
}

// 查看拍卖详情
const viewAuctionDetail = (id) => {
    router.push(`/market/auction/${id}`)
}

// 格式化日期
const formatDate = (dateStr) => {
    if (!dateStr) return '-'
    const date = new Date(dateStr)
    return date.toLocaleString()
}

// 获取状态标签类型
const getStatusType = (status) => {
    const statusMap = {
        'PENDING': 'info',
        'ACTIVE': 'success',
        'FINISHED': 'warning',
        'CANCELLED': 'danger'
    }
    return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        'PENDING': '待审核',
        'ACTIVE': '进行中',
        'FINISHED': '已结束',
        'CANCELLED': '已取消'
    }
    return statusMap[status] || '未知'
}

onMounted(() => {
    fetchSellerInfo()
    fetchSellerAuctions()
})
</script>

<style scoped>
.seller-center-container {
    padding: 20px;
}

.stats-cards {
    margin-bottom: 30px;
}

.stat-card {
    text-align: center;
    padding: 20px;
}

.stat-value {
    font-size: 36px;
    color: #409EFF;
    font-weight: bold;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 14px;
    color: #606266;
}

.action-cards {
    margin-bottom: 30px;
}

.action-cards h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.card-header {
    font-size: 16px;
    font-weight: 600;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card-icon {
    margin-bottom: 15px;
    color: #409EFF;
}

.card-content p {
    margin-bottom: 20px;
    color: #606266;
}

.recent-auctions {
    margin-top: 30px;
}

.recent-auctions h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.auction-title-cell {
    display: flex;
    align-items: center;
}

.auction-image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
}

.auction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>